<template>
  <div style="width:100%;height:100%;background-color:#F3F5F9;display: flex;flex-direction: column;">
    <div class="function-area">
      <!-- 返回按钮和标题 -->
      <div class="header">
        <button class="back-btn" @click="goBack(false)">
          <img class="arrow" src="@/assets/xiangmujindu/arrow_right.png" style="width: 22px;margin-left: 10px; transform: rotate(180deg);" /></button>
        <h3>更换手机号</h3>
      </div>
    </div>
    <div class="page-container">
        <div class="container">
            <!-- 第一部分 -->
            <div class="part1">
                <p class="text-center">更换手机号码后，下次登录可使用新手机号登录</p>
                <p class="text-center">当前手机号:132****7654</p>
            </div>
        
            <!-- 第二部分 -->
            <div class="part2">
                <!-- 2.1 -->
                <div class="part2-1 flex-row">
                    <p class="text-left">+86</p>
                    <p class="text-left-arrow">▾</p>
                    <input type="text" placeholder="输入手机号" class="flex-grow input-no-border" />
                </div>
                <!-- 分隔线 -->
                <div class="divider"></div>
                <!-- 2.2 -->
                
                <div class="part2-2 flex-row">
                    <input type="text" placeholder="手机号验证码" class="flex-grow input-no-border" />
                    <div class="captcha-container">
                        <p class="captcha" v-if="!isCountingDown" @click="startCountdown">获取验证码</p>
                        <p class="captcha countdown" v-else type="text" :value="countdown" readonly>{{ countdown }}</p>
                    </div>
                </div>
            </div>
            <div>
                <!-- 区域2 -->
                <button class="submit-button" @click="goBack(true)">提交</button>
            </div>
        </div>
        <!-- 第三部分 -->
        <button class="submit-btn" @click.stop="toQd">账户注销</button>
    </div>

    <!-- 抢单确认 -->
    <div v-if="qdSureVisi" style="position: fixed;top: 0;left: 0; width: 100vw;height: 100vh;background-color: rgba(0, 0, 0, 0.5);">
      <div class="bg_alert" style="background-color: #fff;margin: 56% auto;width: 80vw;text-align: center;padding-top: 20px;border-radius: 10px;">
        <div style="color: #000;font-weight: bold;font-size: 18px;">注销确认</div>
        <div style="padding: 18px 13px;border-bottom: 1px solid #F4F5F9;font-size: 14px;line-height: 22px;">
          <table style="width: 100%;border-collapse: collapse;">
            <tr>
              <td style="color: #9D9E9F;text-align: center;">确认注销该账号？</td>
            </tr>
          </table>
        </div>
        <div style="display: flex;justify-content: space-around;height: 46px;line-height: 46px;">
          <p style="width: 50%; border-right: 1px solid #F4F5F9;color:#6C7380;" @click="qdSureVisi = false">取消</p>
          <p style="width: 50%;color: #E81F28;" @click="qdSure">确认</p>
        </div>
      </div>
    </div>
    <!-- 提醒 -->
    <div v-if="qdSureToastVisi" style="position: fixed;top: 0;left: 0; width: 100vw;height: 100vh;">
      <p style="background-color: #000;color: #fff; margin: 70% auto;width: 80vw;text-align: center;padding: 10px 20px;border-radius: 10px;">
        {{qdSureToastTitle}}
      </p>
    </div>
  </div>
</template>



<script>
export default {
  components: {
  },
  data() {
    return {
      qdSureVisi: false,
      isCountingDown: false,
      countdown: 60,
      interval: null,
      qdSureToastVisi: false,
      qdSureToastTitle: "", // 
    };
  },
  methods: {
    startCountdown() {
      this.qdSureToastVisi = true;
      this.qdSureToastTitle = '验证码已发送，请注意查收!'
      setTimeout(() => {
        this.qdSureToastVisi = false
        this.Index = -1
      }, 2000);
      this.isCountingDown = true;
      this.countdown = 60;
 
      // 清除之前的定时器（如果有的话）
      if (this.timer) {
        clearInterval(this.timer);
      }
 
      // 设置新的定时器
      this.timer = setInterval(() => {
        this.countdown--;
        if (this.countdown <= 0) {
          this.isCountingDown = false;
          clearInterval(this.timer);
          this.timer = null; // 可选：将timer重置为null
        }
      }, 1000);
    },
    goBack(al) {
      if(al){
        this.qdSureToastVisi = true;
        this.qdSureToastTitle = '您的手机号已更换成功!'
        setTimeout(() => {
          this.qdSureToastVisi = false
          this.Index = -1
          window.history.back();
          // 返回上一页逻辑
        }, 2000);
      } else {
        window.history.back();
      }
    },
    toQd () {
      this.qdSureVisi = true
    },
    qdSure () {
      this.qdSureToastVisi = true;
      this.qdSureToastTitle = '注销成功!'
      setTimeout(() => {
        this.qdSureToastVisi = false
        this.Index = -1

        this.qdSureVisi = false;
        this.$router.push({ name: 'index'})
      }, 2000);
    },
    toDetail (i) {
      this.$router.push({ name: 'qiangdandetail', params: { i } })
    },
  },
  beforeDestroy() {
    // 组件销毁前清除定时器
    if (this.timer) {
      clearInterval(this.timer);
    }
  },
  
};
</script>
<style scoped>
.page-container {
  padding: 12px;
  background-color: #f3f5f9;
  height:100%;
      display: flex;
    flex-direction: column;
}


/* 功能区 */
.function-area {
  background-color: white;
  padding: 10px;
}
/* 头部样式 */
.header {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.back-btn {
  position: absolute;
    left: -1em;

  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
}
h1 {
  margin: 0;
}

.part1 {
  text-align: center;
  color: #999999;
  font-size: 12px;
  margin-bottom: 20px;
}
 
.text-center {
  margin: 5px 0;
}
 
.part2 {
  background-color: #ffffff;
  border-radius: 10px;
  padding: 20px 16px;
  width: 100%;
  max-width: 400px;
  box-sizing: border-box;
  margin-bottom: 20px;
}
 
.flex-row {
  display: flex;
  align-items: center;
  padding: 5px 0px;
}
 
.text-left {
  color: #1e2329;
  font-size: 16px;
  margin-right: 8px;
}
 
.text-left-arrow {
  color: #1e2329;
  font-size: 16px;
  margin-right: 10px;
  font-size:13px;
}
 
.input-no-border {
  border: none;
  color: #999999;
  font-size: 14px;
  outline: none;
  flex-grow: 1;
}
 
.divider {
  height: 1px;
  background-color: #f5f5f5;
  margin: 12px 0;
}
 
.captcha-container {
  position: relative;
}
 
.captcha {
  color: #739f2f;
  font-size: 14px;
  cursor: pointer;
}
 
.countdown {
  color: #999999;
}
 
.hidden {
  display: none;
}
 
.part3 {
  position: absolute;
  bottom: 64px;
}
 
.submit-btn {
  background-color: #FFFFFF;
    color: #E81F28;
    font-size: 16px;
    height: 55px;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    margin: auto 10px 46px 10px;
}

/* 提交按钮 */
.submit-button {
  width: calc(100% - 24px);
  background-color: #99c455;
  color: #ffffff;
  font-size: 16px;
  padding: 16px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin: 0 12px 20px 12px;
}

/* 分割线 */
.divider {
  width: 100%;
  height: 1px;
  background-color: #f4f5f9;
  bottom: 0;
  margin: 12px 0px;
}
/* 弹窗 */
.bg_alert {
  background-image: url('@/assets/xiangmujindu/bg_alert.png');
  background-position: top 0% left 0;
  background-size: 100% 40%;
  background-repeat: no-repeat;
}
</style>